<script setup lang="ts">
defineProps<{
  count: number
}>()

const emit = defineEmits<{
  (e: 'update:count', count: number): void
}>()
</script>

<template>
  <!-- 
    封装一个计数器组件
    希望count不要在组件内部提供(写死) 而是通过props传递
   -->
  <div>{{ count }}</div>
  <button @click="emit('update:count', count + 1)">+1</button>
</template>

<!-- 
  v2中父子组件数据双向绑定 有两种语法
  1. v-model
  2. .sync

  v3统一了以上两种写法 => v-model
  两种玩法:
  1. v-model="count" => :modelValue="count" @update:modelValue="count=$event"
      组件内部接收数据必须modelValue  修改数据必须触发update:modelValue

  2. v-model:msg="str" => :msg="str" @update:msg="str=$event"
      组件内部接收数据必须msg  修改数据必须触发update:msg
 -->
